<template>
  <div class="list_tab_items" @click="click" :class="[(value === $parent.currentIndex)?'active':'']">
    <el-badge :value="badge" :hidden="badge <= 0">
      <slot></slot>
    </el-badge>
  </div>
</template>
<script>
export default {
  name: 'list_tab_item',
  props: {
    value: {
      type: Number,
      default: null
    },
    badge: {
      type: Number,
      default: 0
    }
  },
  computed: {
  },
  methods: {
    click () {
      this.$parent.changeIndex(this.value)
    }
  }
}
</script>
<style lang="less" scoped>
.list_tab_items
{
  padding: 0 20px;
  height: 40px;
  box-sizing: border-box;
  line-height: 40px;
  display: block;
  float: left;
  font-size: 14px;
  font-weight: 500;
  color: #303133;
  position: relative;
  border-bottom: 1px solid transparent;
  border-left: 1px solid #e4e7ed;
  transition: color .3s cubic-bezier(.645,.045,.355,1),padding .3s cubic-bezier(.645,.045,.355,1);
  user-select: none;
  &:first-child
  {
    border-left: none
  }
  &.active
  {
    color: #409EFF;
    border-bottom-color: #fff;
  }
  &:hover
  {
    color: #409EFF;
    cursor: pointer;
  }
}
</style>
